<template>
  <div class="shops">
    <!-- 第一个店铺 -->
    <div class="shop">
      <div class="header">
<!--        <span class="shop_icon"></span>-->
        <span class="shop_name">店铺：健身房</span>
<!--        <span class="shop_wangwang_icon"></span>-->
      </div>
      <!-- 条目一 -->
      <div class="item" v-for="(carItem, index) in shoppingCarList" :key="index">
        <!-- 条目的复选框 -->
        <div class="item_checkbox">
          <input @click="triggerChoice(index)" type="checkbox" name="" id="" value="" />
        </div>
        <!-- 条目的图片 -->
        <div>
          <image-show :ossId="carItem.product.imgUrl"/>
        </div>
        <!-- 条目的广告宣传 -->
        <div class="promotion">
          <!-- 宣传语 -->
          <div class="promotion_content">
            {{carItem.product.name}}
          </div>
          <!-- 三个小图标 -->
          <div class="three_icon" style="font-size: 18px">
            品牌：{{carItem.product.brandName}}
          </div>
        </div>
        <!-- 价格 -->
        <div class="price">
<!--          <div class="price1">-->
<!--            <del>￥119.80</del>-->
<!--          </div>-->
          <div class="price1">
            $ {{carItem.product.worth}}
          </div>
        </div>
        <!-- 数量 -->
        <div class="num">
          <el-input-number v-model="carItem.num" @change="handleChange(index)" :min="0" :max="carItem.product.stock" placeholder="请输入购买数量" />
        </div>
        <!-- 条目总价 -->
        <div id="item_total_price" class="item_total_price">
          ${{carItem.worth}}
        </div>
        <!-- 操作 -->
        <div class="operation">
          <!-- 删除 -->
          <div class="del" @click="delCarItem(carItem, index)">
            删除
          </div>
        </div>
      </div>
      <div style="text-align: right; padding: 30px; font-size: 18px; background: #f5f5f5">
        总价：{{totalPrice}}
        &nbsp;
        <el-button @click="buyHandler" type="success" plain>购买</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {addCar, delCar, getCar, listCar, updateCar, clearCar} from '@/business/api/car'
  import ImageShow from "@/components/ImageShow/index"
  export default {
    name: 'index',
    components: {
      ImageShow
    },
    data: function() {
      return {
        // 购物车列表
        shoppingCarList: [],
        // 被选中的列表
        choiceIndex: [],
        // 总价
        totalPrice: 0
      }
    },
    created() {
      this.getList();
    },
    methods: {
      // 获取购物车列表
      getList() {
        listCar().then(response => {
          if (response.code === 200) {
            this.shoppingCarList = response.rows
          }
        })
      },
      triggerChoice(index) {
        for (let i = 0; i < this.choiceIndex.length; i++) {
          if (this.choiceIndex[i] === index) {
            this.totalPrice -= this.shoppingCarList[this.choiceIndex[i]].worth;
            this.choiceIndex.splice(i, 1)
            return;
          }
        }
        this.choiceIndex.push(index)

        this.totalPrice = 0;
        for (let i = 0; i < this.choiceIndex.length; i++) {
          this.totalPrice += this.shoppingCarList[this.choiceIndex[i]].worth
        }
      },
      async buyHandler() {
        let clearItems = [];
        if (this.choiceIndex.length === 0) {
          this.$message.warning('请先选择购买物品');
          return;
        }
        for (let i = 0; i < this.choiceIndex.length; i++) {
          clearItems.push(this.shoppingCarList[this.choiceIndex[i]]);
        }
        await clearCar(clearItems).then(response => {
          if (response.code === 200) {
            this.$message.success('购买成功')
          }
        })

        await this.getList();
      },
      handleChange(index) {
        let item = this.shoppingCarList[index]
        item.worth = item.num * item.product.worth
        // 修改购物车库存
        updateCar(item)
        this.totalPrice = 0;
        for (let i = 0; i < this.choiceIndex.length; i++) {
          this.totalPrice += this.shoppingCarList[this.choiceIndex[i]].worth
        }
      },
      delCarItem(carItem, index) {
        this.$modal.confirm('是否确认删除购物车的数据项？').then(() => {
          for (let i = 0; i < this.choiceIndex.length; i++) {
            if (this.choiceIndex[i] === index) {
              this.choiceIndex.splice(i, 1);
            }
          }
          // 删除指定id的购物车列表
          return delCar(carItem.id);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).finally(() => {
          // this.getList();
        });
      }
    }
  }
</script>

<style scoped>
  /* 类选择器可以写多个，使用逗号隔开 */
  .shop_icon, .shop_wangwang_icon, .three_icon span {
    width: 15px;
    height: 15px;
    background-color: aqua;
    /* 以块的形式展现出来，但是不会独占行 */
    display: inline-block;
  }
  /* 设置所有店铺的样式 */
  .shops {
    width: 1100px;
    background-color:aliceblue;
    /* 设置div居中 */
    margin-left: auto;
    margin-right: auto;
    /* 字号大小 */
    font-size: 0.8125rem;
    color:black;
  }
  /* 设置店铺名称的位置 ，使其对齐*/
  .shop_name {
    position: relative;
    bottom: 0.1875rem;
  }
  /* 设置店铺头上4个元素的右外补丁 */
  .shop_checkbox, .shop_wangwang_icon, .shop_name, .shop_icon{
    margin-right: 0.625rem;
  }
  /* 设置条目的样式 */
  .item{
    /* 弹性布局 */
    display: flex;
    /* 设置背景颜色 */
    background-color: #FAFAFA;
    /* 设置边框 */
    border: 0.0625rem solid #DAD9D9;
    /* 给item条目添加一个内补丁 */
    padding: 1.25rem;

  }
  /* 设置商品图片的样式 */
  .item_img{
    width: 6.25rem;
    height: 6.25rem;
    background-color: #00FFFF;
  }
  /* 设置header向下的补丁 */
  .header{
    margin-bottom: 0.625rem;
  }
  /* 设置条目复选框，条目图片的右外补丁 */
  .item_checkbox{
    margin-right: 0.625rem;
  }
  .item_img{
    margin-right: 0.625rem;
  }
  .promotion{
    padding-top: 20px;
    padding-left: 50px;
    font-size: 28px;
    /* 弹性布局，默认是横向布局 */
    display: flex;
    /* 纵向布局，把弹性布局的默认横向改为纵向布局 */
    flex-direction: column;
    /* 调整内容，两端对齐 */
    justify-content: space-between;
    /* 调整div盒子宽度 */
    width: 15.625rem;
    margin-right: 3.125rem;
  }
  /* sku商品样式 */
  .sku{
    /* 右外补丁 */
    margin-right: 9.375rem;
  }
  /* 单价price右边添加补丁 */
  .price{
    margin-right: 2.8125rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: center;

  }
  /* 价格一灰色 */
  .price1{
    width: 150px;
    color: pink;
    font-size: 18px;
  }
  .num {
    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-content: center;*/
    margin-top: 2.5rem;
  }
  /* num和总价的右外补丁 */
  .num, .item_total_price{
    margin-right: 3.125rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* 总价颜色修改 */
  .item_total_price{
    font-weight: 600;
    color: orangered;
  }
  .num{
    background-color: pink;

    height: 1.875rem;
  }
  .shop{
    margin-top: 1.875rem;
  }
  .checkout{
    display: flex;
    justify-content: space-between;
    background-color: pink;
    height: 2.5rem;
    margin-top: 1.25rem;
    padding: 1.25rem;
  }
  .checkall{
    margin-right: 6.25rem;
  }
  .checkout2{
    margin-left: 1.875rem;
  }
  .checkoutbtn, .totaltext{
    margin-left: 1.875rem;
  }
  .checkedcount, .total_price{
    font-size: 1.25rem;
    font-weight: 600;
    color: orangered;
  }
  .checkoutbtn{
    width: 6.25rem;
    height: 58px;
    background-color:#555555;
    display: inline-block;
    position: relative;

    font-size: 1.25rem;
    color: #00FFFF;
    text-align: center;
    /* 设置行间距 */
    line-height: 3.75rem;
  }
  .checkout2{
    position: relative;
    bottom: 1.25rem;
  }
  .del:hover, .plus:hover, .minus:hover{
    color: #F31919;
    cursor: pointer;
  }

  .operation {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
</style>
